import React, { memo } from 'react';
import { SearchAlbumWrapper } from './style'
import useShowAlbumDetail from '@/hooks/useShowAlbumDetail'
import {formatImg} from '@/utils/format'
export default memo(function SearchAlbum(props) {
  const { list } = props
  const goToAlbumDetail = useShowAlbumDetail()
  return (
    <SearchAlbumWrapper>
      {
        list.map(item => {
          return (
            <div className="item" key={item.id}>
              <img src={formatImg(item.picUrl,130)} alt="" className="image"/>
              <div className="mask sprite_covor" onClick={e => goToAlbumDetail(item.id)}></div>
              <div className="name text-nowrap">{item.name}</div>
              <div className="artist text-nowrap">{item.artist.name}</div>
            </div>
          )
        })
      }
    </SearchAlbumWrapper>
  )
});
